<template>
    <div class="app-container">
        <el-card shadow="never" class="top-search-view-card">
            <el-row>
                <el-form :inline="true" :model="searchForm" class="demo-form-inline search-view">
                    <el-form-item label="">
                        <el-cascader ref="cascader" v-model="searchForm.area" :options="options" :props="cascaderProps"
                                     @change="cascaderChange" clearable></el-cascader>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="handleSearch" class="search-button">查询</el-button>
                    </el-form-item>
                </el-form>
            </el-row>
        </el-card>
        <el-card shadow="never">
            <el-row>
                <el-col :span="12">
                    <div style="font-size: 16px;font-weight:900;">机构等级统计</div>
                    <div id="institutionLv"></div>
                </el-col>
                <el-col :span="12">
                    <div style="font-size: 16px;font-weight:900;margin-bottom: 20px;">区域排行</div>
                    <el-table :data="tableData" :stripe="true" style="width: 100%">

                        <el-table-column prop="name" align="center" label="区域"/>
                        <el-table-column prop="value" align="center" label="机构数"/>
                    </el-table>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8">
                    <div style="font-size: 16px;font-weight:900;">机构类型统计</div>
                    <div id="institutionType"></div>
                </el-col>
                <el-col :span="16">
                    <div style="font-size: 16px;font-weight:900;">机构各地区分布</div>
                    <div id="distribution"></div>
                </el-col>
            </el-row>
        </el-card>
    </div>
</template>

<script>
    const echarts = require('echarts')
    import regionList from '../../assets/map.json'
    import * as InstitutionalStatisticalAnalysis from '../../api/InstitutionalStatisticalAnalysis.js'
    import { getCity } from '../../utils/cityFind.js'

    export default {
        name: 'HealthScienceFontIndex',
        data () {
            return {
                searchForm: {
                    area: [],
                },
                area: '',
                areaType: 0,
                cascaderProps: {
                    value: 'name',
                    label: 'name',
                    children: 'districts',
                    //emitPath: false,
                    checkStrictly: true
                },
                options: regionList,
                tableData: [],
                chart1: null,
                chartData1: [],
                chart2: null,
                chartData2: [],
                chart3: null,
                chartDataX: [],
                barSeries: [],
                xAxis: [],
                series1: [],
                series2: []
            }
        },
        methods: {
            handleSearch () {
                this.queryByGradeList()
                this.queryByAreaList()
                this.queryByClassifyList()
                this.queryByAreaAndTypeList()
            },
            cascaderChange (e) {
                this.$refs.cascader.dropDownVisible = false
                this.areaType = e.length
                this.area = e[this.areaType - 1]
                console.log(this.area, this.areaType)
            },
            queryByGradeList () {
                const param = {
                    area: this.area,
                    areaType: this.areaType
                }
                InstitutionalStatisticalAnalysis.queryByGradeList(param).then(res => {
                    if (res.state == "SUCCESS") {
                        this.chartData1 = res.data.map(item => ({
                                name: item.grade,                                
                                value:item.grade_cnt
                            }))
                        this.initInstitutionLv()
                    }
                }).catch(error => {
                    console.log(error)
                })
            },
            initInstitutionLv () {
                this.chart1 = echarts.init(document.getElementById('institutionLv'))
                const option = {
                    tooltip: {
                        trigger: 'item'
                    },
                    legend: {
                        left: 'right',
                        bottom: 'bottom',
                        type: 'scroll',
                        textStyle: {
                            color: '#111'
                        }
                    },
                    series: [
                        {
                            name: '机构等级统计',
                            type: 'pie',
                            radius: '80%',
                            data: this.chartData1,
                            label: {
                                backgroundColor: 'transparent',
                                color: '#111',
                                show: true,
                                formatter: '{d}%'
                            },
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                }
                this.chart1.setOption(option)
            },
            queryByAreaList () {
                const param = {
                    area: this.area,
                    areaType: this.areaType
                }
                InstitutionalStatisticalAnalysis.queryByAreaList(param).then(res => {
                    if (res.state == "SUCCESS") {
                        this.tableData = res.data.map(item => ({
                                name: item.area_name,
                                value: item.area_cnt
                            }))
                    }
                }).catch(error => {
                    console.log(error)
                })
            },
            queryByClassifyList () {
                const param = {
                    area: this.area,
                    areaType: this.areaType
                }
                InstitutionalStatisticalAnalysis.queryByClassifyList(param).then(res => {
                    if (res.state == "SUCCESS" ) {
                        this.chartData2 = res.data.map(item => ({
                                name: item.classification,                                
                                value:item.class_cnt
                            }))
                        this.initInstitutionType()
                    }
                }).catch(error => {
                    console.log(error)
                })
            },
            initInstitutionType () {
                this.chart2 = echarts.init(document.getElementById('institutionType'))
                const option = {
                    tooltip: {
                        trigger: 'item'
                    },
                    legend: {
                        left: 'center',
                        bottom: 'bottom',
                        type: 'scroll',
                        textStyle: {
                            color: '#111'
                        }
                    },
                    series: [
                        {
                            name: '机构类型统计',
                            type: 'pie',
                            radius: '70%',
                            data: this.chartData2,
                            label: {
                                backgroundColor: 'transparent',
                                color: '#111',
                                show: true,
                                formatter: '{d}%'
                            },
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                }
                this.chart2.setOption(option)
            },
            queryByAreaAndTypeList () {
                const param = {
                    area: this.area,
                    areaType: this.areaType
                }
                this.chartDataX = []
                this.barSeries = []
                InstitutionalStatisticalAnalysis.queryByAreaAndTypeList(param).then(res => {
                    if (res.state == "SUCCESS" ) {
                        if(param.area==""){
                           param.area="陕西省"
                           param.areaType=1
                        }
                        let resultCity = getCity(param.area, param.areaType)
                        let mess=[]
                        let citys = res.data.filter(item => resultCity.includes(item.area_city))
                        citys.forEach(item => {
                            if(mess.findIndex(item1=>item1.area_city===item.area_city)==-1){
                                if(item.classification=='公共卫生'){
                                    mess.push({
                                        area_city:item.area_city,
                                        series1:item.cnt
                                    })
                                    
                                }
                                if(item.classification=='医院'){
                                        mess.push({
                                        area_city:item.area_city,
                                        series2:item.cnt
                                    })
                                    }
                            }else{
                                let index=mess.findIndex(item1=>item1.area_city===item.area_city)
                                if(item.classification=='公共卫生'){
                                    mess[index]={
                                        area_city:item.area_city,
                                        series1:item.cnt
                                    }
                                }
                                if(item.classification=='医院'){
                                        mess[index]={
                                        area_city:item.area_city,
                                        series2:item.cnt
                                    }
                                    }
                            }
                        })
                        this.xAxis=mess.map(item=>item.area_city)
                        this.series1=mess.map(item=>item.series1)
                        this.series2=mess.map(item=>item.series2)
                        this.initDistribution()
                    }
                }).catch(error => {
                    console.log(error)
                })
            },
            initDistribution () {
                this.chart3 = echarts.init(document.getElementById('distribution'))
                const option = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    legend: {
                        left: 'center',
                        bottom: 'bottom',
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '10%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        data: this.xAxis
                    },
                    yAxis: {
                        type: 'value',
                        boundaryGap: [0, 0.01]
                    },
                    series: [
                        {
                            name: '公共卫生',
                            type: 'bar',
                            data: this.series2
                        },
                        {
                            name: '医院',
                            type: 'bar',
                            data: this.series1
                        }
                    ]
                }
                this.chart3.setOption(option)
            }
        },
        mounted () {
            this.queryByGradeList()
            this.queryByAreaList()
            this.queryByClassifyList()
            this.queryByAreaAndTypeList()
        }
    }
</script>

<style lang="scss" scoped>
    #institutionLv {
        width: 100%;
        height: 500px;
    }

    #institutionType {
        width: 100%;
        height: 400px;
    }

    #distribution {
        width: 100%;
        height: 400px;
    }
</style>
